<template>
  <div>
    <div class="edit_b_content"
      v-for="(data, idx) in list"
      :key="idx">
      <ul class="info_list clearfix" v-if="id == 'basicInfo'">
        <li >
          <b>您的姓名</b>
          <input type="text" maxlength="100" v-model="data.titleName" @input="inputAction(idx)"
          :placeholder="placeholderVal.title"/>
        </li>
        <li>
          <b>联系电话</b>
          <input type="text" v-model="data.roleName" @input="inputAction(idx)" :placeholder="placeholderVal.title1" class="input">
        </li>
        <li>
          <b>联系邮箱</b>
          <input type="text" v-model="data.emails" @input="inputAction(idx)" placeholder="请输入联系邮箱" class="input">
        </li>
        <li>
          <b>工作年限</b>
          <input type="text" v-model="data.years" @input="inputAction(idx)" placeholder="请输入工作年限" class="input">
        </li>
        <li >
          <b>学校</b>
          <input type="text" v-model="data.school" @input="inputAction(idx)" placeholder="请输入学校" class="input">
        </li>
      </ul>
      <!-- {{id}} -->
      <div v-if="id == 'work'">
        <p class="data">{{data}}</p>
        <div>
          <ul class="info_list clearfix">
            <li>
              <b>公司名称</b>
              <input type="text" maxlength="100" v-model="data.titleName" @input="inputAction(idx)"
              :placeholder="placeholderVal.title"/>
            </li>
            <li>
              <b>职位</b>
              <input type="text" v-model="data.roleName" @input="inputAction(idx)" :placeholder="placeholderVal.title1" class="input">
            </li>
            <li  v-if="id === 'work'">
              <b>项目时间</b>
              <input type="text" v-model="data.time" @input="inputAction(idx)" placeholder="请输入项目时间" class="input">
            </li>
          </ul>
        </div>
        <resume-edit :cur-id="curId" @inputValue="inputValue($event)" :cur-index="idx" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import resumeEdit from './EditAction.vue';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  workList: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(['work-input']);

const list = computed(() => {
  return JSON.parse(JSON.stringify(props.workList));
});
const curId = computed(() => {
  return props.id;
});
const placeholderVal = computed(() => {
  const { id } = props;
  let value = '';
  let value1 = '';
  if (id === 'work') {
    value = '请输入公司名称';
    value1 = '请输入职位名称';
  }
  if (id === 'project') {
    value = '请输入项目名称';
    value1 = '请输入角色名称';
  }
  if (id=== 'basicInfo') {
    value = '输入您的姓名';
    value1 = '输入联系电话';
  }
  return {
    title: value,
    title1: value1
  };
});

const inputAction = (value) => {
  let data = list.value.map(item => ({ ...item, idName: props.id }));

  emit('work-input', JSON.stringify(data));
};

const inputValue = (res) => {
  console.log('input-----', res);
  let { value, index } = res;
  let data = list.value;
  data[index].content = value;
  emit('work-input', JSON.stringify(data));
};
</script>